// 嵌套（Nesting）
// 嵌套代替层叠或与层叠结合使用的能力
body {
  font-size: 20px;

  header {
    background-color: #83d5bb;

    nav {
      margin: 0 auto;
      color: #a9e3ae;
    }
  }
}

.clearfix {
  display: block;
  zoom: 1;

  // & 表示当前选择器的父级
  &:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

// @规则嵌套和冒泡
// @ 规则（例如 @media 或 @supports）可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡（bubbling）
.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media (min-resolution: 192dpi) {
      background-color: #aeacd3;
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}